<!--
 * @Description:
 * @version:
 * @Author: sunqian_sr
 * @Date: 2023-03-16 14:10:58
 * @LastEditors: Andy
 * @LastEditTime: 2023-04-04 10:24:17
-->
<template>
  <div class="center flex-column">
    <div class="flow-title flex-row" v-if="centerOptions?.length">
      <div
        class="title-item-panl"
        v-for="(item, index) in centerOptions"
        :key="index"
        :class="{ 'acitive-item': activeValue === item.value }"
        @click="handleClickItem(item)"
        >{{ item.label }}</div
      >
    </div>
    <el-scrollbar v-if="flowsModules[activeValue]?.length" class="flow-scroll">
      <div class="flow-content flex-row">
        <div
          v-for="(item, index) in flowsModules[activeValue]"
          :key="index"
          @click="handleInFlow(item)"
          class="flow-item"
        >
          <img :src="item.flowIcon" class="flow-icon" />
          <span>{{ item.flowName }}</span>
        </div>
      </div>
    </el-scrollbar>
    <div v-if="!centerOptions?.length" class="flow-content flex-column no-data">
      <img src="../../../common/assets/images/flow-no-data.png" class="no-data-img" />
      <span>暂无可用流程</span>
    </div>
  </div>
</template>
<script>
  import { mapActions } from 'pinia'
  import { apiGetFlows } from '../api'
  import { pinias } from '@/common/pinia'

  const { workStore } = pinias
  export default {
    name: 'FlowCenter',
    props: {
      dictOptions: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        centerOptions: [],
        flowsModules: {},
        activeValue: 0
      }
    },
    computed: {
      getDictStr() {
        return JSON.stringify(this.dictOptions)
      }
    },
    watch: {
      getDictStr: {
        handler(val) {
          // if (this.dictOptions['xflow.flow_category']?.length) {
          //   this.activeValue = this.dictOptions['xflow.flow_category'][0].value
          // }
          this.initFlowList()
        },
        immediate: true,
        deep: true
      }
    },
    created() {},
    methods: {
      ...mapActions(workStore, ['setCenter']),
      async initFlowList() {
        const { data, code } = await apiGetFlows()
        this.flowsModules = data
        let includesKeys = []
        Object.keys(this.flowsModules).forEach((key) => {
          includesKeys.push(key)
        })
        this.centerOptions = this.dictOptions['xflow.flow_category'].filter((v) => includesKeys.includes(v.value))
        if (this.centerOptions?.length) {
          this.activeValue = this.centerOptions[0].value
        }
        this.setCenter(this.flowsModules)
      },
      handleClickItem(item) {
        this.activeValue = item.value
      },
      handleInFlow(item) {
        this.$router.push({
          path: '/workflow/flowLaunch',
          query: item
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  ::v-deep .el-scrollbar__bar.is-horizontal {
    height: 0;
  }
</style>
